<template>
  <!-- element-loading-background="rgba(0, 0, 0, 0.03)"
    element-loading-text="数据加载中"
    element-loading-spinner="el-icon-loading" -->
  <el-table
    border
    :data="tableData"
    ref="table"
    class="table"
    :header-cell-style="{
      padding: '2.5px 0',
      background: '#015AF0',
      textAlign: 'center',
      color: '#ffffff',
      borderColor: '#879FC5',
    }"
    @selection-change="handleSelect"
    :height="height"
    :cell-style="{ textAlign: 'center', borderColor: '#dddddd' ,cursor: 'pointer'}"
    v-loading="tableLoading"
    :tree-props="treeProps"
    row-key="id"
  >
    >
    <div v-for="(item, index) in tableHeader" :key="`tableHeader-${index}`">
      <!-- 多选框 -->
      <el-table-column
        v-if="item.type == 'selection'"
        :type="item.type"
        :width="item.width"
        :label="item.label"
        :fixed="item.fixed"
      ></el-table-column>
      <!-- 索引行 -->
      <el-table-column
        v-else-if="item.type == 'index'"
        :type="item.type"
        :width="item.width"
        :label="item.label"
        :fixed="item.fixed"
      ></el-table-column>

      <!-- 操作按钮 -->
      <el-table-column
        v-else-if="item.type == 'operation'"
        :label="item.label"
        :min-width="item.width"
        :fixed="item.fixed"
      >
        <template slot-scope="scope">
          <span
            class="operate-btn"
            v-for="(temp, ind) in item.operation"
            :key="ind"
            @click="temp.clickFun(scope.row)"
          >
            <el-button
              plain
              :type="temp.type"
              :size="temp.size"
              v-if="temp.isShow && scope.row.result != 1"
            >
              {{ temp.name }}
            </el-button>
            <el-button
              plain
              :type="temp.type"
              :size="temp.size"
              v-else-if="!temp.isShow"
            >
              {{ temp.name }}
            </el-button>
          </span>
        </template>
      </el-table-column>

      <!-- 自定义内容 -->
      <el-table-column
        v-else-if="item.slot"
        :type="item.type"
        :width="item.width"
        :label="item.label"
        :fixed="item.fixed"
      >
        <template slot-scope="scope">
          <slot
            :name="item.slot"
            :fixed="item.fixed"
            v-bind="{ row: scope.row, column: scope.column }"
          ></slot>
        </template>
        <!-- <slot :name="item.slot" :fixed="item.fixed" :data="item"></slot> -->
        <!--  -->
      </el-table-column>

      <!-- 普通默认类型 -->
      <el-table-column
        v-else
        :label="item.label"
        :min-width="item.width"
        :prop="item.prop"
        :sortable="item.sortable"
        :formatter="item.formatter ? item.formatter : null"
        :show-overflow-tooltip="item.tooltip ? true : false"
      >
      </el-table-column>
    </div>
  </el-table>
</template>
<script>
export default {
  props: {
    tableHeader: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    tableLoading: {
      type: Boolean,
      default: false,
    },
    height: {},

    treeProps: {
      type: Object,
      default: () => {
        return { children: "children", hasChildren: "hasChildren" };
      },
    },
  },
  data() {
    return {};
  },

  methods: {
    handleSelect(selection, row) {
      this.$emit("handleSelect", selection);
    },
  },
};
</script>

<style scoped>
/* 设置表格各行的padding值 */
::v-deep.el-table .el-table__cell {
  padding: 5.5px 0;
}
/* 设置表格隔行变色 */
/* ::v-deep .el-table__row:nth-child(even) {
  background-color: #dee2ee;
} */
/* 设定鼠标划过表格样式 */
::v-deep .el-table__body tr.hover-row > td.el-table__cell {
  background-color: #d6e5f8;
}
.operate-btn {
  margin-right: 10px;
}
</style>
